<template>
<view class="left-box">
	<u-popup :show="show" mode="left" @close="closeLeft">
		<view class="header-box">
			<view class="header">
				<u--image :src="avatar" shape="circle" 
				width="64px" height="64px"></u--image>
				<view class="username">{{userInfo.nickname}}</view>
				<view class="location">
					<u-icon name="map" color="#fff" size="16"></u-icon>
					<text class="location-name">浙江 杭州</text>
				</view>
			</view>
		</view>
		<view class="left-content">
			<view class="menu-list">
				<image style="width: 100%" src="https://s2.loli.net/2022/06/28/JS9BIA5HDeUsXo2.png"></image>
			</view>
		</view>
		<view class="logout" :style="platForm === 'android' ? 'padding-bottom: 50rpx' : ''" @click="logout">
			 <text class="label">退出</text>
			 <view style="color: rgb(102,102,102);font-size: 24px" class="iconfont icon-tuichu"></view>		
		</view>
	</u-popup>
	
	<u-modal :show="showModal" 
	style="z-index: 90000;"
	width="270px"
	title="小窝记账" 
	@confirm="confirmLogout"
	:showCancelButton="true"
	confirmText="确定"
	@cancel="showModal = false"
	confirmColor="rgb(122,155,234)"
	>
	<view slot="default">
		<rich-text :nodes="content" style="color: #606266"></rich-text>
	</view>
	</u-modal>
</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { logout } from '@/api/common.js'
	export default {
		data() {
			return {
				show: true,
				platForm: '',
				avatar: require('@/static/tt.png'),
				showModal: false,
				content: '确定退出当前账号吗?'
			}	
		},
		computed: {
		...mapGetters(['userInfo']),
	    },
		onReady() {
			this.platForm = uni.getSystemInfoSync().platform
		},
		methods: {
			closeLeft() {
				this.$emit('closeLeft')
			},
			logout() {
				this.showModal = true
			},
			async confirmLogout() {
			  await logout({}, { custom: { auth: true }})
				 this.showModal = false;
				  uni.navigateTo({
					url: '/pages/login/index'
				 });
			     this.closeLeft()  
			  	 uni.clearStorageSync();
			}
		}
	}
</script>
<style lang="scss">
	.left-box {
		.u-popup {
			flex: none;
			height: 100vh;
		}
	}
</style>
<style lang="scss" scoped>
	.left-box {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
		background-color: #f5f5f5;
	.header-box {
		position: relative;
		width: 300px;
		height: 400rpx;
		background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);
		background: linear-gradient(to right, #8f94fb, #4e54c8);
		.header {
			padding-top: 90rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		   .username {
			   color: #fff;
			   margin-top: 20rpx;
			   font-size: 36rpx;
		   }
		   .location {
			   display: flex;
			   justify-content: center;
			    margin-top: 20rpx;
			   .location-name {
				   color: #fff;
				   font-size: 26rpx;
				   padding-left: 10rpx;
			   }
		   }
		}
	}
    .left-content {
		flex: 1;
		overflow: auto;
	}
	.logout {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 35rpx;
		.label {
		  color: rgb(102,102,102);
		  padding-right: 10rpx;
		}
		
	}
}
</style>
